<!--
 * @Author: dfh
 * @Date: 2024-03-20 11:24:37
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container">
        <scroll-view scroll-y class="scroll">
            <view class="content-wrap">
                <view class="card flex ai-center mt-30">
                    <image :src="bankInfo.picUrl" class="icon_banner" />
                    <view class="flex flex-col ml-20">
                        <text class="txt-black-34 txt-30">{{ bankInfo.bankName }}</text>

                        <view class="flex ai-center mt-20">
                            <text class="txt-black-102 txt-20 mt-8 mr-4">成功率</text>
                            <RateWidget :rate="bankInfo.successRate" />
                        </view>
                    </view>
                </view>
                <view class="card flex flex-col mt-30" v-if="bankInfo.bankCardKid && bankInfo.bankCardKid.length > 0">
                    <view class="txt-30 txt-black-34">银行卡种类</view>
                    <view class="txt-26 txt-black-102 mt-20" v-for="(item, index) in bankInfo.bankCardKid" :key="index">
                        {{ item.val }}</view>
                </view>
                <view class="card flex flex-col mt-30" v-if="bankInfo.askFor && bankInfo.askFor.length > 0">
                    <view class="txt-30 txt-black-34">开户要求</view>
                    <view class="txt-26 txt-black-102 mt-20" v-for="(item, index) in bankInfo.askFor" :key="index">{{
                        item.val }}</view>
                </view>
                <view class="card flex flex-col mt-30" v-if="bankInfo.information && bankInfo.information.length > 0">
                    <view class="txt-30 txt-black-34">准备资料</view>
                    <view class="txt-26 txt-black-102 mt-20" v-for="(item, index) in bankInfo.information" :key="index">
                        {{ item.val }}</view>
                </view>
                <view class="card flex flex-col my-30" v-if="bankInfo.flow && bankInfo.flow.length > 0">
                    <view class="txt-30 txt-black-34">开户流程</view>
                    <view class="txt-26 txt-black-102 mt-20" v-for="(item, index) in bankInfo.flow" :key="index">{{
                        item.val }}</view>
                </view>
            </view>
        </scroll-view>
        <view class="bottom-wrap">
            <view class="btn1" @click="navigateTo('locale')">
                <view class="txt">过港开户</view>
            </view>
            <view class="btn2" @click="navigateTo('appoint')">
                <view class="txt">预约开户</view>
            </view>
        </view>
        <!-- <view class="kefu-wrap" @click="noUseingFn">
            <view class="kefu-box">
                <text class="iconfont icon-kefu txt-blue-1" style="font-size:56rpx"></text>
            </view>
        </view> -->
    </view>
</template>

<script setup>
import { fetchBankInfo } from '@/services/bank';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import RateWidget from '@/components/rate-widget.vue'
import { showToast } from '@/utils/toast'
import { noUseingFn } from '@/utils/index'

const bankInfo = ref({});
const id = ref('');
onLoad((options) => {
    id.value = options.id;
    getBankInfo()
})

const getBankInfo = async () => {
    const { msg, status, data } = await fetchBankInfo(id.value);
    if (status === 1) {
        bankInfo.value = data || {};
    } else {
        showToast(msg || '获取银行卡详情失败')
    }
}

const navigateTo = (type) => {
    let url = '';
    switch (type) {
        case 'appoint':
            url = `/pages/bankCard/appointOpen?id=${id.value}`
            break;
        case 'locale':
            url = `/pages/bankCard/localAppoint?id=${id.value}&successRate=${bankInfo.successRate}`
            break;
    }
    uni.navigateTo({ url })
}
</script>

<style lang="scss" scoped>
.container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;

    .scroll {
        width: 100%;
        flex: 1;
        /* height: calc(100% - 100rpx); */
        background-color: rgba(240, 244, 248, 1);
        box-sizing: border-box;

        .content-wrap {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .card {
                width: 700rpx;
                border-radius: 30rpx;
                background-color: white;
                padding: 20rpx;
                box-sizing: border-box;

                .icon_banner {
                    width: 400rpx;
                    height: 240rpx;
                    border-radius: 20rpx;
                }
            }
        }
    }

    .bottom-wrap {
        position: fixed;
        left: 0;
        bottom:0;
        padding-bottom: constant(safe-area-inset-bottom);
        /* 兼容 iOS 设备 */
        padding-bottom: env(safe-area-inset-bottom);
        /* 兼容 iPhone X 及以上设备 */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100rpx;

        .btn1 {
            width: 278rpx;
            height: 80rpx;

            background: #00CEC8;
            box-shadow: 0rpx 30rpx 80rpx -4rpx rgba(0, 206, 200, 0.19);
            border-radius: 28rpx 14rpx 14rpx 70rpx;
            transform: skewX(-30deg);

            .txt {
                width: 278rpx;
            }
        }

        .btn2 {
            margin-left: 20rpx;
            width: 371rpx;
            height: 80rpx;
            background: linear-gradient(135deg, #1089FF 0%, #0F5BFF 100%);
            box-shadow: 0rpx 30rpx 80rpx -4rpx rgba(15, 91, 255, 0.2);
            border-radius: 14rpx 70rpx 28rpx 14rpx;
            transform: skewX(-30deg);

            .txt {
                width: 371rpx;
            }
        }

        .txt {
            color: white;
            font-size: 34rpx;

            text-align: center;
            line-height: 80rpx;
            font-weight: 500;
            transform: skewX(30deg);
        }
    }

    .kefu-wrap {
        position: absolute;
        right: 0;
        bottom: 200rpx;
        width: 100rpx;
        height: 80rpx;
        border-radius: 40rpx 0 0 40rpx;
        background-color: rgba(0, 0, 0, .3);
        display: flex;
        align-items: center;

        .kefu-box {
            margin-left: 10rpx;
            width: 66rpx;
            height: 66rpx;
            border-radius: 33rpx;
            border: 6rpx solid rgba(253, 101, 65, 0.6);
            box-sizing: border-box;
            background-color: white;
        }
    }
}
</style>